<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>carousel模块快速使用</title>
    <link rel="stylesheet" href="../css/layui.css" media="all">
</head>

<body>
    <div class="layui-carousel" id="test1" style="margin: 0 auto;">
        <h1 style="text-align:center;">校园风采</h1>
        <br>
        <br>
        <div carousel-item>
            <div><img style="width: 1080px" src="../images/1 (1).jpg"></div>
            <div><img style="width: 1080px" src="../images/1 (2).jpg"></div>
            <div><img style="width: 1080px" src="../images/1 (3).jpg"></div>
            <div><img style="width: 1080px" src="../images/1 (4).jpg"></div>
            <div><img style="width: 1080px" src="../images/1 (5).jpg"></div>
            <div><img style="width: 1080px" src="../images/1 (6).jpg"></div>
            <div><img style="width: 1080px" src="../images/1 (7).jpg"></div>
        </div>
    </div>

    <script src="../js/layui.js"></script>
    <script>
        layui.use('carousel', function () {
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test1',
                height: '450px'
                , width: '1080px' //设置容器宽度
                , arrow: 'always' //始终显示箭头
                // ,anim: 'updown' //切换动画方式
            });
        });
    </script>
</body>

</html>